<template>
  <div>
    <div class="vessel-top">
      <div class="table-search">
        <div class="search-left">
          <div class="search-item">
            <span class="search-label">装载时间</span>
            <div class="search-input">
              <a-date-picker :style="{width: '100%'}" :bordered="false" v-model:value="value1" picker="year" />
            </div>
          </div>
          <div class="search-btn">
            <div class="search-icon">
              <a-cascader
                  v-model:value="value"
                  placeholder="Please select"
                  :options="selectOption"
                  :fieldNames="{
                  label: 'name',
                  value: 'key'
                }"
                  @change="onChange"
              >
                <PlusOutlined/>
              </a-cascader>
            </div>
            <a-button class="search-btn2" @click="resetCustom">
              <template #icon>
                <RedoOutlined/>
              </template>
              重置
            </a-button>
            <a-button class="search-btn1" @click="searchTable">查询</a-button>
            <!--          <a-button type="text">更多筛选条件</a-button>-->
          </div>
        </div>
      </div>
      <a-divider :style="{margin: 0}"/>
      <VesslGannt/>
    </div>
    <div class="vessel-margin">
<!--      <VesselTable/>-->
    </div>
  </div>
</template>
<script setup>
import {ref} from "vue";
import {PlusOutlined, RedoOutlined} from '@ant-design/icons-vue';
import VesslGannt from './components/VesslGannt.vue'
import VesselTable from './components/VesselTable.vue'
const areas = ref([
  {
    label: '长协-DNS-2020.02.10',
    value: 'a'
  }
])
const formState = ref({
  name: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
});
const labelCol = ref(
    {
      style: {
        width: '90px'
      },
    },
)
const wrapperCol = ref({
  span: 20
})

</script>

<style lang="scss" scoped>
.vessel-top {
  background: #ffffff;
}
.vessel-margin {
  margin-top: 10px;
}
.gutter-row {
  width: 22%;
}
.gutter-box {
  border: 1px solid #DCDEE0;
  height: 32px;
  line-height: 32px;
  margin-bottom: 24px;
  width: 100%;
}
.table-search {
  width: 100%;
  height: 95px;
  display: flex;
  padding: 16px;
  .search-left {
    padding-top: 16px;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    .search-item {
      margin-left: 10px;
      border: 1px solid  #DCDEE0;
      height: 34px;
      line-height: 32px;
      display: flex;
      width: 302px;
      margin-bottom: 24px;
      position: relative;
      font-size: 14px;
      .search-label {
        display: block;
        //width: 80px;
        line-height: 32px;
        color: #2C3749;
        padding: 0 12px;
        text-align: left;
      }
      .search-input {
        width: 220px;
        text-align: left;
      }
      .close-btn {
        position: absolute;
        top: -17px;
        right: -4px;
      }
    }
    .search-btn {
      margin-left:20px;
      display: flex;
      margin-bottom: 12px;
      .search-btn1 {
        background: #f5001d;
        border-radius: 2px;
        color: #fff;
        padding: 0 20px;
      }
    }
  }
}
</style>
